<div class="layui-card-body">
    <div class="layui-fluid">
        <div class="layui-row">
            <div class="layui-col-xs12">
                <form class="layui-form" action="">
                    <input type="radio" name="loadType" lay-filter="rnuwg1rbzyb" data-id="r3labj58eqhx" value="SPA"
                           title="单页面方式" checked="">
                    <div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i>
                        <div>单页面方式</div>
                    </div>
                    <input type="radio" name="loadType" lay-filter="rnuwg1rbzyb" data-id="r2rrf6nfatln" value="TABS"
                           title="选择卡方式">
                    <div class="layui-unselect layui-form-radio layui-form-radioed"><i
                            class="layui-anim layui-icon"></i>
                        <div>选择卡方式</div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <br>
    <h4>主题</h4>
    <br>
    <div class="layui-row">
        <div class="layui-col-xs12" style="margin-bottom:15px;">

            <div class="layui-row layui-col-space5">
            <div class="layui-col-xs3">
                <div class="setting-color">
                    <label data-theme="default">
                        <input type="radio" name="setting-theme" checked="checked">
                        <i class="layui-icon layui-icon-ok-circle"></i>
                        <span class="split">
                                <span class="color bg-default"></span>
                                 <span class="color bg-default-light"></span>
                            </span>
                        <span class="color bg-gray-dark"></span>
                    </label>
                </div>
            </div>
            </div>
            <div class="layui-row layui-col-space5">
                <div class="layui-col-xs3">
                    <div class="setting-color">
                        <label data-theme="blue-light">
                            <input type="radio" name="setting-theme">
                            <i class="layui-icon layui-icon-ok-circle"></i>
                            <span class="split">
          <span class="color bg-info"></span>
          <span class="color bg-info-light"></span>
        </span>
                            <span class="color bg-white"></span>
                        </label>
                    </div>
                </div>
                <div class="layui-col-xs3">
                    <div class="setting-color">
                        <label data-theme="green-light">
                            <input type="radio" name="setting-theme">
                            <i class="layui-icon layui-icon-ok-circle"></i>
                            <span class="split">
          <span class="color bg-green"></span>
          <span class="color bg-green-light"></span>
        </span>
                            <span class="color bg-white"></span>
                        </label>
                    </div>
                </div>
                <div class="layui-col-xs3">
                    <div class="setting-color">
                        <label data-theme="purple-light">
                            <input type="radio" name="setting-theme">
                            <i class="layui-icon layui-icon-ok-circle"></i>
                            <span class="split">
          <span class="color bg-purple"></span>
          <span class="color bg-purple-light"></span>
        </span>
                            <span class="color bg-white"></span>
                        </label>
                    </div>
                </div>
                <div class="layui-col-xs3">
                    <div class="setting-color">
                        <label data-theme="red-light">
                            <input type="radio" name="setting-theme">
                            <i class="layui-icon layui-icon-ok-circle"></i>
                            <span class="split">
          <span class="color bg-danger"></span>
          <span class="color bg-danger-light"></span>
        </span>
                            <span class="color bg-white"></span>
                        </label>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs12">
            <div class="layui-row layui-col-space5">
                <div class="layui-col-xs3">
                    <div class="setting-color">
                        <label data-theme="blue-dark">
                            <input type="radio" name="setting-theme">
                            <i class="layui-icon layui-icon-ok-circle"></i>
                            <span class="split">
            <span class="color bg-info"></span>
            <span class="color bg-info-light"></span>
          </span>
                            <span class="color bg-gray-dark"></span>
                        </label>
                    </div>
                </div>
                <div class="layui-col-xs3">
                    <div class="setting-color">
                        <label data-theme="green-dark">
                            <input type="radio" name="setting-theme">
                            <i class="layui-icon layui-icon-ok-circle"></i>
                            <span class="split">
            <span class="color bg-green"></span>
            <span class="color bg-green-light"></span>
          </span>
                            <span class="color bg-gray-dark"></span>
                        </label>
                    </div>
                </div>
                <div class="layui-col-xs3">
                    <div class="setting-color">
                        <label data-theme="purple-dark">
                            <input type="radio" name="setting-theme">
                            <i class="layui-icon layui-icon-ok-circle"></i>
                            <span class="split">
            <span class="color bg-purple"></span>
            <span class="color bg-purple-light"></span>
          </span>
                            <span class="color bg-gray-dark"></span>
                        </label>
                    </div>
                </div>
                <div class="layui-col-xs3">
                    <div class="setting-color">
                        <label data-theme="red-dark">
                            <input type="radio" name="setting-theme">
                            <i class="layui-icon layui-icon-ok-circle"></i>
                            <span class="split">
            <span class="color bg-danger"></span>
            <span class="color bg-danger-light"></span>
          </span>
                            <span class="color bg-gray-dark"></span>
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        layui.use(['form', 'utils'], function () {
            var form = layui.form,
                    $ = layui.jquery,
                    utils = layui.utils,
                    localStorage = utils.localStorage;

            form.render();
            var key = 'KITADMIN_SETTING_LOADTYPE';
            var setting = localStorage.getItem(key);
            if (setting !== null) {
                if (setting.loadType === 'SPA') {
                    $('input[data-id="r3labj58eqhx"]')[0].checked = true;
                } else {
                    $('input[data-id="r2rrf6nfatln"]')[0].checked = true;
                }
                form.render('radio');
            }
            form.on('radio(rnuwg1rbzyb)', function (data) {
                var val = data.value;
                localStorage.setItem(key, {
                    loadType: val
                });
                // 重新加载
                location.reload();
            });


            var themeKey = 'KITADMIN_SETTING_THEME';
            $('input[name="setting-theme"]').on('click', function () {
                var _that = $(this);
                var themeName = _that.parent('label').attr('data-theme');
                localStorage.setItem(themeKey, {
                    theme: themeName
                });
                var str = $('#theme').attr('href');
                var _themeUrl = str.substr(0, str.lastIndexOf('/') + 1);
                $('#theme').attr('href', _themeUrl + themeName + '.css');
                var _body = $('body');
                if (!_body.hasClass('kit-theme-' + themeName)) {
                    _body.addClass('kit-theme-' + themeName);
                }
            });
        });
    </script>
    <style scoped="">
        .setting-color {
            padding: 0 5px;
        }

        .setting-color > label {
            display: block;
            position: relative;
            margin: 0 10px;
            border-radius: 3px;
            overflow: hidden;
            border: 1px solid rgba(0, 0, 0, 0.1);
            cursor: pointer;
        }

        .setting-color > label > input[type="radio"] {
            position: absolute;
            opacity: 0;
            visibility: hidden;
            box-sizing: border-box;
            padding: 0;
            overflow: visible;
            margin: 0;
            font-family: inherit;
            font-size: inherit;
            line-height: inherit;
        }

        .setting-color > label .split {
            display: block;
        }

        .setting-color > label .split .color:first-child {
            float: left;
            width: 70%;
        }

        .setting-color > label .split .color {
            display: block;
            height: 37.5px;
        }

        .setting-color > label .split .bg-default {
            background-color: #373d41;
            color: #42485b !important;
        }

        .setting-color > label .split .bg-default-light {
            background-color: #373d41;
            color: #42485b !important;
        }

        .setting-color > label .split .bg-info {
            background-color: #23b7e5;
            color: #fff !important;
        }

        .setting-color > label .split .bg-info-light {
            background-color: #51c6ea;
            color: #fff !important;
        }

        .setting-color > label .split .bg-green {
            background-color: #37bc9b;
            color: #fff !important;
        }

        .setting-color > label .split .bg-green-light {
            background-color: #58ceb1;
            color: #fff !important;
        }

        .setting-color > label .split .bg-purple {
            background-color: #7266ba;
            color: #fff !important;
        }

        .setting-color > label .split .bg-purple-light {
            background-color: #9289ca;
            color: #fff !important;
        }

        .setting-color > label .split .bg-danger {
            background-color: #f05050;
            color: #fff !important;
        }

        .setting-color > label .split .bg-danger-light {
            background-color: #f47f7f;
            color: #fff !important;
        }

        .setting-color > label i.layui-icon-ok-circle {
            position: absolute;
            display: block;
            left: 50%;
            top: 50%;
            width: 20px;
            height: 20px;
            margin-top: -20px;
            margin-left: -10px;
            text-align: center;
            font-size: 1.33333333em;
            vertical-align: -15%;
            color: #fff;
            opacity: 0;
        }

        .setting-color > label input[type="radio"]:checked + i.layui-icon-ok-circle {
            opacity: 1 !important;
        }

        .setting-color > label .color {
            display: block;
            height: 18px;
        }

        .setting-color > label .bg-white {
            background-color: #fff;
            color: inherit !important;
        }

        .setting-color > label .bg-gray-dark {
            background-color: #3a3f51;
            color: #fff !important;
        }

        .setting-color > label:last-child {
            margin-right: 0;
        }

        .setting-color > label:first-child {
            margin-left: 0;
        }
    </style>
</div>